<#include "/common/taglibs.ftl" />
<@menu code='${entityName!}'/>
<title><@spring.message code="${entityName!}" /> - <@spring.message code="list" /></title>
<div class="row">
    <div class="col-md-12">
        <div class="tabbable-custom ">
            <ul class="nav nav-tabs ">
                <li class="${(!RequestParameters['search_EQ_deleted']??)?string('active','')}"><a href="${ctx}/${baseUrl!}" ><i class="fa fa-table"></i> <@spring.message code="all"/><@spring.message code="${entityName!}"/> </a></li>
                <li class="${(RequestParameters['search_EQ_deleted']! == 'false')?string('active','')}"><a href="${ctx}/${baseUrl!}?search_EQ_deleted=false" ><i class="fa fa-table"></i> <@spring.message code="undeleted.prefix"/><@spring.message code="${entityName!}"/> </a></li>
                <li class="${(RequestParameters['search_EQ_deleted']! == 'true')?string('active','')}"><a href="${ctx}/${baseUrl!}?search_EQ_deleted=true" ><i class="fa fa-table"></i> <@spring.message code="deleted.prefix"/><@spring.message code="${entityName!}"/> </a></li>
            </ul>
            <div class="portlet light portlet-fit portlet-datatable bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-settings font-dark"></i>
                        <span class="caption-subject font-dark sbold uppercase"><@spring.message code="${entityName!}"/></span>
                    </div>
                    <div class="actions"><@tableHeaderButtons resourceIdentity='${resourceIdentity!}'/></div>
                </div>
                <div class="portlet-body">
                    <div class="table-container">
                        <@showMessage />
                        <table id="datatable_ajax" class="table table-striped table-bordered table-hover table-checkable"
                            data-datatable="true"
                            data-datatable-advance-search="show"
                            data-datatable-quick-search-filter="search_LIKE_name_OR_loginName_OR_email"
                            >
                            <thead>
                                <tr role="row" class="heading">
                                    <th width="1%" data-checkable="true" data-orderable="false"></th>
                                    <th width="5%" data-data="id" data-searchable="false"> ID# </th>
                                    <th width="10%" data-data="name"> <@spring.message code="user.name"/> </th>
                                    <th width="10%" data-data="staffNO"> <@spring.message code="user.staffno"/> </th>
                                    <th width="10%" data-data="enName"> <@spring.message code="user.enName"/> </th>
                                    <th width="10%" data-data="loginName"> <@spring.message code="user.loginName"/> </th>
                                    <th width="10%" data-data="phone"> <@spring.message code="user.phone"/> </th>
                                    <th width="10%" data-data="mobile"> <@spring.message code="user.mobile"/> </th>
                                    <th width="10%" data-data="gender" data-render="renderGender" data-search-type="<@searchTypeSelect items=genders/>"> <@spring.message code="user.gender" /> </th>
                                    <th width="10%" data-data="leader.name"> <@spring.message code="user.leader"/> </th>
                                    <th width="10%" data-data="office.id" data-render="renderOffice" data-search-type="select:{'<@spring.message code="select..."/>':''<#list offices as item>,'${item.name}(${item.enName})':'${item.id}'</#list>}"> <@spring.message code="office"/> </th>
                                    <th data-data="email"> <@spring.message code="user.email"/> </th>
                                    <th data-data="address"> <@spring.message code="user.address"/> </th>
                                    <th width="20%" class="center" data-data="birthday" data-search-type="daterange" data-render="renderDate"> <@spring.message code="user.birthday"/> </th>
                                    <th width="20%" data-data="activated" data-render="renderBoolean" data-search-type="<@searchTypeSelectBoolean/>"> <@spring.message code="activated"/> </th>
                                    <th width="20%" class="center" data-data="lastModifyDate" data-search-type="daterange" data-render="renderDateTime"> <@spring.message code="lastModifyDate"/> </th>
                                    <th width="20%" data-actions="<@tableColumnButtons resourceIdentity='${resourceIdentity!}'/>"> <@spring.message code="action"/> </th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<page-plugin-style>
<#include "/common/plugins/jquery.datatable.style.ftl" />
<#include "/common/plugins/jquery.datetime.picker.style.ftl" />
</page-plugin-style>
<page-plugin-script>
<#include "/common/plugins/jquery.datatable.script.ftl" />
<#include "/common/plugins/jquery.datetime.picker.script.ftl" />
</page-plugin-script>
<page-style>
</page-style>
<page-script>
	<script>
    	function renderGender( data, type, full, meta ){
    		if(data=='male'){
                return '<@spring.message code="gender.male"/>';
            } else {
            	return '<@spring.message code="gender.female"/>';
            }
    	}

    	function renderOffice( data, type, full, meta ){
            return full.office?full.office.name+"("+full.office.enName+")":"";
        }
	</script>
</page-script>